<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/register.css">
</head>


<body>

<div class=" entirety">
<div class="welcome">欢迎注册吃游</div>
<p class="zimu">USER REGISTER</p>


<div class="side" ></div>
<div class="having">
    <p>
        已有账号？
        <a href="login.html">立即登录</a>
    </p>
</div>

<div>
    <form id="registerForm" >
        <input  type="text" id="username" name="userId"  class="nickname" maxlength="24" tabindex="3" placeholder="用户名">
        <span id="username1" ></span>
        <input  type="password" id="password" name="userPassword" class="nickname" maxlength="24" tabindex="3"placeholder="密码">
        <span  id="password1"></span>
        <input  type="password" id="verifypasswprd" class="nickname" maxlength="24" tabindex="3"placeholder="确认密码">
        <span id="verifypasswprd1"></span>
        <input  type="text" id="phone" name="userPhone" class="nickname" maxlength="24" tabindex="3"placeholder="手机号码">
        <span id="phone1" ></span>
        <input id="get_acc" type="button" class="submit" value="立即注册" tabindex="8">
    </form>


</div>

</div>

</body>

<script src="js/quote/jquery-3.4.1.js"></script>
<script>
    /*
            表单校验：
                1.用户名：单词字符，长度8到20位
                2.密码：单词字符，长度8到20位
                3.手机号：手机号格式
         */
    //当某一个组件失去焦点是，调用对应的校验方法

    //校验用户名
    //单词字符，长度5到20位
    $("#username").blur(function () {
        var username = $("#username").val();
        //2.定义正则
        var reg_username = /^\w{5,20}$/;

        //3.判断，给出提示信息
        var flag = reg_username.test(username);
        if(flag){

            //用户名合法
            $("#username1").text("")
        }else{

            //用户名非法,加一个红色边框
            $("#username1").text("用户名必须为5-14位")
        }

        return flag;
    })


    $("#password").blur(function () {
        var password = $("#password").val();
        //2.定义正则
        var reg_password = /^\w{3,20}$/;

        //3.判断，给出提示信息
        var flag = reg_password.test(password);
        if(flag){

            //用户名合法
            $("#password1").text("")
        }else{

            //用户名非法,加一个红色边框
            $("#password1").text("密码不合法")
        }

        return flag;
    })


    $("#verifypasswprd").blur(function () {
        var verifypasswprd = $("#verifypasswprd").val();

         var flag
        if(verifypasswprd==$("#password").val()){

            //用户名合法
            $("#verifypasswprd1").text("")
            flag=true
        }else{

            //用户名非法,加一个红色边框
            $("#verifypasswprd1").text("确认密码与密码不一致")
            flag=false
        }

        return flag;
    })


    $("#phone").blur(function () {
        var password = $("#phone").val();
        //2.定义正则
        var reg_password = /^1[3|4|5|8][0-9]\d{4,8}$/;

        //3.判断，给出提示信息
        var flag = reg_password.test(password);
        if(flag){

            //用户名合法
            $("#phone1").text("")
        }else{

            //用户名非法,加一个红色边框
            $("#phone1").text("请输入正确手机号格式")
        }
        return flag;
    })








    $(function () {
        //当表单提交时，调用所有的校验方法
        $("#get_acc").click(function(){
            $("#username").focus();
            $("#username").blur();
            $("#password").focus();
            $("#password").blur();
            $("#verifypasswprd").focus();
            $("#verifypasswprd").blur();
            $("#phone").focus();
            $("#phone").blur();

            //1.发送数据到服务器
            if($("#username1").text()==""&&$("#password1").text()==""&&$("#verifypasswprd1").text()==""&&$("#phone1").text()==""){


                //校验通过,发送ajax请求，提交表单的数据   username=zhangsan&password=123
                $.post("user/registerUser",$("#registerForm").serialize(),function(data){
                        console.log(data)
                    //处理服务器响应的数据  data  {flag:true,errorMsg:"注册失败"}
                    if(data.code==0){
                        alert("注册成功")
                        //注册成功，跳转成功页面
                        location.href="login.html";
                    }else{
                        //注册失败,给errorMsg添加提示信息

                        $("#username1").text(data.message)

                    }
                });

            }
            //2.不让页面跳转
            return false;
            //如果这个方法没有返回值，或者返回为true，则表单提交，如果返回为false，则表单不提交
        });


    });

    $("#phone").keydown(function(event){
        if(event.keyCode == 13) {
            $('#get_acc').click();
        }
    });






</script>
</html>